import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import Navbar from '../../compoents/Navbar'
import { Button, Input } from 'antd-mobile'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  const {state} = useLocation()
  
  const [formData, setFormData] = useState({
    patientName: '王小柯',
    idNumber: '505154623153121523',
    medicalCardNumber: '2015010110',
    phoneNumber: '13666666666'
  })
  const [idPhotos, setIdPhotos] = useState({
    front: null,
    back: null
  })
  const [errors, setErrors] = useState({
    patientName: '',
    idNumber: '',
    medicalCardNumber: '',
    phoneNumber: ''
  })

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
    
    // 清除该字段的错误信息
    if (errors[field as keyof typeof errors]) {
      setErrors(prev => ({
        ...prev,
        [field]: ''
      }))
    }
  }

  const handlePhotoUpload = (type: 'front' | 'back', file: File) => {
    setIdPhotos(prev => ({
      ...prev,
      [type]: file
    }))
  }

  const validateForm = () => {
    const newErrors = {
      patientName: '',
      idNumber: '',
      medicalCardNumber: '',
      phoneNumber: ''
    }
    
    if (!formData.patientName.trim()) {
      newErrors.patientName = '请输入患者姓名'
    }
    if (!formData.idNumber.trim()) {
      newErrors.idNumber = '请输入身份证号'
    }
    if (!formData.medicalCardNumber.trim()) {
      newErrors.medicalCardNumber = '请输入就诊卡号'
    }
    if (!formData.phoneNumber.trim()) {
      newErrors.phoneNumber = '请输入手机号码'
    }
    
    setErrors(newErrors)
    return !Object.values(newErrors).some(error => error !== '')
  }

  const handleNext = () => {
    // 验证表单
    if (!validateForm()) {
      return
    }
    if (!idPhotos.front || !idPhotos.back) {
      alert('请上传身份证正反面照片')
      return
    }
    
    // 跳转到下一步
    navigate('/WriteMsg',{state:{reports:state.reports}})
  }

  return (
    <div className={style.container}>
      <Navbar 
        title="申请信息填写" 
        onBack={() => navigate(-1)} 
        showBack 
      />


        <div className={style.content}>
            {/* 进度条 */}
            <div className={style.progressContainer}>
                <div className={style.progressStep}>
                <div className={`${style.stepCircle} ${style.active}`}>1</div>
                <div className={style.stepLine}></div>
                <div className={style.stepCircle}>2</div>
                <div className={style.stepLine}></div>
                <div className={style.stepCircle}>3</div>
                </div>
                <div className={style.stepLabels}>
                <span className={`${style.stepLabel} ${style.active}`}>基本信息</span>
                <span className={style.stepLabel}>邮寄方式</span>
                <span className={style.stepLabel}>完成申请</span>
                </div>
            </div>

            {/* 表单内容 */}
            <div className={style.formContainer}>
                <div className={style.sectionTitle}>请完善以下基本信息</div>
                
                <div className={style.formFields}>
                <div className={`${style.fieldGroup} ${errors.patientName ? style.error : ''}`}>
                    <label className={style.fieldLabel}>患者姓名*</label>
                    <div className={style.inputContainer}>
                    <Input
                        className={style.inputField}
                        value={formData.patientName}
                        onChange={(value) => handleInputChange('patientName', value)}
                        placeholder="请输入患者姓名"
                    />
                    {errors.patientName && <span className={style.errorText}>{errors.patientName}</span>}
                    </div>
                </div>

                <div className={`${style.fieldGroup} ${errors.idNumber ? style.error : ''}`}>
                    <label className={style.fieldLabel}>身份证号*</label>
                    <div className={style.inputContainer}>
                    <Input
                        className={style.inputField}
                        value={formData.idNumber}
                        onChange={(value) => handleInputChange('idNumber', value)}
                        placeholder="请输入身份证号"
                    />
                    {errors.idNumber && <span className={style.errorText}>{errors.idNumber}</span>}
                    </div>
                </div>

                <div className={`${style.fieldGroup} ${errors.medicalCardNumber ? style.error : ''}`}>
                    <label className={style.fieldLabel}>就诊卡号*</label>
                    <div className={style.inputContainer}>
                    <Input
                        className={style.inputField}
                        value={formData.medicalCardNumber}
                        onChange={(value) => handleInputChange('medicalCardNumber', value)}
                        placeholder="请输入就诊卡号"
                    />
                    {errors.medicalCardNumber && <span className={style.errorText}>{errors.medicalCardNumber}</span>}
                    </div>
                </div>

                <div className={`${style.fieldGroup} ${errors.phoneNumber ? style.error : ''}`}>
                    <label className={style.fieldLabel}>本人电话*</label>
                    <div className={style.inputContainer}>
                    <Input
                        className={style.inputField}
                        value={formData.phoneNumber}
                        onChange={(value) => handleInputChange('phoneNumber', value)}
                        placeholder="请输入手机号码"
                    />
                    {errors.phoneNumber && <span className={style.errorText}>{errors.phoneNumber}</span>}
                    </div>
                </div>
                </div>

                <div className={style.photoSection}>
                <div className={style.sectionTitle}>身份证照片*</div>
                <div className={style.photoUploadContainer}>
                    <div className={style.photoUploadItem}>
                    <div className={style.photoUploadBox}>
                        {idPhotos.front ? (
                        <img src={URL.createObjectURL(idPhotos.front)} alt="身份证正面" className={style.uploadedPhoto} />
                        ) : (
                        <span className={style.plusIcon}>+</span>
                        )}
                        <input
                        type="file"
                        accept="image/*"
                        className={style.fileInput}
                        onChange={(e) => e.target.files?.[0] && handlePhotoUpload('front', e.target.files[0])}
                        />
                    </div>
                    <div className={style.photoLabel}>正面身份证</div>
                    </div>

                    <div className={style.photoUploadItem}>
                    <div className={style.photoUploadBox}>
                        {idPhotos.back ? (
                        <img src={URL.createObjectURL(idPhotos.back)} alt="身份证反面" className={style.uploadedPhoto} />
                        ) : (
                        <span className={style.plusIcon}>+</span>
                        )}
                        <input
                        type="file"
                        accept="image/*"
                        className={style.fileInput}
                        onChange={(e) => e.target.files?.[0] && handlePhotoUpload('back', e.target.files[0])}
                        />
                    </div>
                    <div className={style.photoLabel}>反面身份证</div>
                    </div>
                </div>
                </div>

                <div className={style.tipsSection}>
                <div className={style.tipsTitle}>温馨提示</div>
                <div className={style.tipsContent}>
                    <div className={style.tipItem}>
                    1、上传身份证图片支持JPG/PNG格式,最大支持10M
                    </div>
                    <div className={style.tipItem}>
                    2、如自拍摄照片则需保证照片清晰且填写真实有效,否则将降低申请通过率,请按要求拍摄,感谢您的支持
                    </div>
                </div>
                </div>
            </div>
        </div>
      


      {/* 下一步按钮 */}
      <div className={style.buttonContainer}>
        <Button className={style.nextButton} onClick={()=>handleNext(state)}>
          下一步
        </Button>
      </div>
    </div>
  )
}

export default Index
